
<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {
  addcollect,
  addlike,
  cancelcollect,
  cancelike,
  disablepost, getallhome,
  getmypost,
  getrecommend, searchhome,
  searchmypost
} from "@/http/api";
import {getTokenWithExpiration, getUidWithExpiration} from "@/components/cookie";
import {ElMessage} from "element-plus";
import router from "@/router/index";

const url = "/src/assets/img/avatar/"

const info =reactive({
  mypost:[{
    avatar: "",
    userId: "",
    name: "",
    postTime: "",
    postId: 0,
    msg: "",
    tagName: "",
    imgs: [],
    likeNum: 0,
    collectNum: 0,
    commentNum: 0,
    isReview: 0,
    collect: false,
    like: false
  }
  ],
  pageSize: 5,
  pageNum:1,
  total:0,
  name:'',
  tag:'',
  status:'',
  isReview:'',
  postcontnet:'',
})



const token = ref(getTokenWithExpiration())
const dialogAddTitle = ref(false)

const userid = ref(getUidWithExpiration())

const postinfo = reactive({
  msg:'',
  img:[],
  tag:'',
  isAnonymity:1,
})

const options = reactive({
  option: [
    {
      tagName: "",
      id: "",
    }]
})

import { type UploadProps, type UploadUserFile} from 'element-plus'
import {addPost, getTags} from "@/http/api";
import {Search} from "@element-plus/icons-vue";

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)


const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

function closedialog(){
  postinfo.msg=''
  postinfo.img=[]
  postinfo.tag=''
  postinfo.isAnonymity=1
  fileList.value = []
}

function addtitle(){
  dialogAddTitle.value = false
  for (let i = 0; i < fileList.value.length; i++){
    postinfo.img.push(fileList.value[i].name)
  }
  addPost({uid:userid.value,
    msg:postinfo.msg,
    imgs:postinfo.img,
    tagid:postinfo.tag,
    isAnonymity:postinfo.isAnonymity?0:1}).then((res)=>{
    if (res.code == 10000){
      ElMessage.success('发布成功')
      getall()
    }else {
      ElMessage.error(res.msg)
    }
  })
}

const recommendinfo = reactive({
  info:[{
    avatar: "",
    collect: '',
    collectNum: 0,
    commentNum: 0,
    imgs: [],
    imgsStr: "",
    isReview: '',
    like: 0,
    likeNum: 0,
    msg: "",
    name: "",
    postId: 0,
    postTime: '',
    tagName: '',
    tagid: '',
    userId: ""
  }]
})

function getRecommend() {
  getrecommend({uid:uid.value}).then((res)=>{
    console.log(res)
    recommendinfo.info = res.data
    console.log(recommendinfo.info)
  })
}

function tothispost(data) {
  router.push("/postdetail/"+data.postId)
}


//修改每页最大数
function handleSizeChange(newSize){
  info.pageSize = newSize;
  getall()
}
//跳转到第几页
function handleCurrentChange(newPage){
  info.pageNum = newPage;
  getall()
}

const uid = ref(getUidWithExpiration())

function getall(){
  getallhome({uid:uid.value,pageSize:info.pageSize,pageIndex:info.pageNum}).then((res)=>{
    if (res.code===10000){
      info.mypost = res.data.list
      info.total = res.data.total
    }else {
      ElMessage.error("查询失败")
    }
  })
}

onMounted(()=>{
  getall()
  getTags().then((res)=>{
    options.option = res.data
  })
  getRecommend()
})

let notcard = true

function card(data,index){
  if (notcard){
    router.push("/postdetail/"+data.postId)
  }
  notcard = true
}

function like(postid,index){
  notcard = false
  addlike({postId: postid,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      info.mypost[index].like = !info.mypost[index].like
      info.mypost[index].likeNum++

    }else {
      ElMessage.error(res.msg)
    }
  })
}

function collect(postid,index){
  notcard = false

  addcollect({postId: postid,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      info.mypost[index].collect = !info.mypost[index].collect
      info.mypost[index].collectNum++
    }else {
      ElMessage.error(res.msg)
    }
  })
}

function nolike(postid,index){
  notcard = false
  cancelike({postId: postid,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      info.mypost[index].like = !info.mypost[index].like
      info.mypost[index].likeNum--
    }else {
      ElMessage.error(res.msg)
    }
  })
}

function nocollect(postid,index){
  notcard = false
  cancelcollect({postId: postid,uid:uid.value}).then(res => {
    if (res.code === 10000) {
      info.mypost[index].collect = !info.mypost[index].collect
      info.mypost[index].collectNum--
    }else {
      ElMessage.error(res.msg)
    }
  })
}

function deletePost(postid,index){
  notcard = false
  disablepost({postid:postid,isDeleted:0}).then((res)=>{
    if (res.code===10000){
      getall()
    }
    else{
      ElMessage.error("修改失败")
    }
  })
}

function searchPost() {
  searchhome({uid:uid.value,msg:info.postcontnet}).then((res)=>{
    if (res.code===10000){
      info.mypost = res.data
    }else {
      ElMessage.error("查询失败")
    }
  })

}

</script>

<template>

  <div class="container">
    <div class="my_main">

      <div class="my_post_card">
        <div class="my_title">
          我的推荐
        </div>
        <div class="my_post_content" @click="card(data,index)" v-for="(data,index) in info.mypost">
          <div class="my_post_img">
            <el-avatar class="avatar" size="25" :src="url+data.avatar" ></el-avatar>
          </div>
          <div class="post_details">
            <div class="my_post_text">{{data.msg}}</div>
            <div class="meta_info">
              <div class="my_name" >{{data.name}}</div>
              <div class="my_time">{{ data.postTime }}</div>
              <el-tag type="info" class="my_tag">{{ data.tagName }}</el-tag>
              <div class="my_like" @click="like(data.postId,index)" v-if="!data.like"><el-icon :size="20" ><Sunny /></el-icon>{{data.likeNum}}</div>
              <div class="my_like" @click="nolike(data.postId,index)" v-if="data.like"><el-icon :size="20" :color="'#ffd04b'"><Sunny /></el-icon>{{data.likeNum}}</div>
              <div class="my_collect" @click="collect(data.postId,index)" v-if="!data.collect"><el-icon :size="20"><Star /></el-icon>{{data.collectNum}}</div>
              <div class="my_collect" @click="nocollect(data.postId,index)" v-if="data.collect"><el-icon :size="20" :color="'#ffd04b'"><Star /></el-icon>{{data.collectNum}}</div>
              <div class="my_comment"><el-icon :size="20"><ChatLineSquare /></el-icon>{{data.commentNum}}</div>
              <el-tag type="info" style="margin-left: 150px">{{data.isReview===0?"待审核":data.isReview==1?"已通过":"未通过"}}</el-tag>
            </div>
          </div>
        </div>
      </div>
      <!--    分页   size-change 每页最大变化  current-change当前最大变化   layout 功能组件   -->

      <el-pagination

          :page-sizes="[1, 5, 10, 15]"
          :page-size="info.pageSize"
          layout="total, sizes, prev, pager, next, jumper,slot"
          :total="info.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 10px"

      />
    </div>

    <div class="my_other">
      <!-- 内容 -->
      <div class="my_new_post" style="padding: 20px">
        <span style="font-size: large">进行发帖:</span>
        <el-button type="success" @click="dialogAddTitle = true" class="add_button">New+</el-button>
        <el-input
            v-model="info.postcontnet"
            style="width: 300px;margin-top: 30px"
            placeholder="搜索"
            class="input-with-select"
        >
          <template #append>
            <!--            按钮内容居中-->
            <el-button @click="searchPost" :icon="Search" style="width: 30px;display: flex;align-content: center" />
          </template>
        </el-input>
      </div>

      <div class="recommended">
        <div style="height: 25px;border-bottom: 1px solid #b6b6b6">猜你喜欢</div>
        <div style="height: 50px; border-bottom: 1px solid #b6b6b6; margin: 0 10px; display: flex; flex-direction: column;" v-for="(data,index) in recommendinfo.info" @click="tothispost(data)">
          <!-- 文本显示区域，带有省略号 -->
          <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #575757; max-width: 100%;">
            {{data.msg}}
          </div>
          <!-- name和el-tag的容器 -->
          <div style="display: flex; align-items: center;">
            <div class="name" style="margin-right: 5px; font-size: 13px;color:#949494 ">{{ data.name }}</div>
            <el-tag type="info" style="height: 15px;margin-left: 20px">{{ data.tagName }}</el-tag>
          </div>
        </div>
      </div>

    </div>
  </div>

  <el-dialog v-model="dialogAddTitle" title="发文" width="500" @close="closedialog"	>

    <el-form v-model="postinfo">
      <el-input
          v-model="postinfo.msg"
          style="width: 450px;margin-bottom: 10px"
          :autosize="{ minRows: 2}"
          show-word-limit
          maxlength="200"
          type="textarea"
          placeholder="有什么趣事想要与大家分享？"
      />
    </el-form>

    <el-upload
        v-model:file-list="fileList"
        action="http://127.0.0.1:8888/upload/img"
        :headers="{'token':token}"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>


    <template #footer>

      <div class="dialog-footer">
        <el-select
            v-model="postinfo.tag"
            filterable
            placeholder="Tag"
            style="width: 150px;margin-right: 20px"
        >
          <el-option
              v-for="item in options.option"
              :key="item.id"
              :label="item.tagName"
              :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="addtitle" style="width: 60px">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

.container {
  height: 615px;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 定义两列 */
}

.my_post_card{
  min-height: 500px;
  width: 73vw;
  background-color: white;
  border: 1px solid #d2d2d2; /* 1px宽，实线，黑色 */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.my_title{
  padding-left:20px ;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #d2d2d2; /* 1px宽，实线，黑色 */
  /*阴影*/
  display: flex; /* 设置为 Flex 容器 */
  align-items: center; /* 垂直居中子元素 */
}

.my_post_content{
  height: 80px;
  width: 94%;
  margin-left: 3%;
  border-bottom: 1px solid #d2d2d2; /* 1px宽，实线，黑色 */
  display: flex;
  align-items: center;
}


.post_details {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column; /* 文本和元数据垂直排列 */
}

.my_post_text {
  margin-left: 10px;
  width: 400px; /* 设置宽度 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

.meta_info {
  display: flex; /* 用户名和时间水平排列 */
  align-items: center; /* 可选，如果需要垂直居中 */
  margin-top: 5px; /* 文本和元数据之间的间距 */
}

.my_name {
  margin-left: 10px;
  font-size: 12px;
}

.my_time{
  margin-left: 20px;
  font-size: 12px;
  color: #ababab;
}
.my_tag{
  margin-left: 50px;
}
.my_like{
  display: flex;
  align-items: center;
  margin-left: 50px;
  color: #8d8d8d;
}
.my_collect{
  display: flex;
  align-items: center;
  margin-left: 20px;
  color: #8d8d8d;
}
.my_comment{
  display: flex;
  align-items: center;
  margin-left: 20px;
  color: #8d8d8d;
}

.my_main {
  padding: 20px;
  height: 100%;
  width: 75vw;
}

.my_other {
  height: 100%;
  width: 25vw;
}

.my_new_post{
  height: 150px;
  width: 350px;
  margin-top: 20px;
  margin-left: 20px;
  /**阴影*/
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.add_button{
  width: 70px;
}

.recommended{
  height: 300px;
  width: 350px;
  margin-top: 20px;
  margin-left: 20px;
  padding: 20px;
  /**阴影*/
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

}

</style>